<template>
  <div>
    <TabsView />
    <span style="font-size: 25px; font-weight: bold; color: #fb6"
      >房屋列表</span
    >
    <el-divider></el-divider>
    <el-button type="primary" class="tub" @click="dialogVisible = true"
      ><i class="el-icon-circle-plus-outline"></i>添加房屋</el-button
    >
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="id" label="ID" sortable width="180">
      </el-table-column>
      <el-table-column prop="houseImg" label="房屋图片" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.houseImg" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="houseArea" label="房屋面积"> </el-table-column>
      <el-table-column prop="houseNum" label="房屋编号"> </el-table-column>
      <el-table-column prop="xixi" label="操作">
        <template slot-scope="scope">
          <!--  <el-button type="primary" round>修改信息</el-button> -->
          <el-button type="text" @click="dialog = true"
            ><el-button type="primary" round>修改信息</el-button></el-button
          >
          <el-dialog title="修改房屋" :visible.sync="dialog" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="ID">
                <el-input v-model="form.id"></el-input>
              </el-form-item>
              <el-form-item label="修改面积">
                <el-input v-model="form.houseArea"></el-input>
              </el-form-item>
              <el-form-item label="修改图片">
                <form>
                  <input type="file" ref="upimg" />
                  <input @click="uploadimg()" value="点我上传图片" />
                </form>
              </el-form-item>

              <el-form-item label="房屋信息">
                <el-input v-model="form.conent"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="xixixi()"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <el-button type="success" round @click="dell(scope.row.id)"
            >删除房屋</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加房屋" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="ID">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="房屋面积">
            <el-input v-model="form.houseArea"></el-input>
          </el-form-item>
          <el-form-item label="房屋图片">
            <!--    <el-input v-model="form.img"></el-input> -->
            <form>
              <input type="file" ref="upimg" />
              <input @click="uploadimg()" value="点我上传图片" />
            </form>
          </el-form-item>

          <el-form-item label="房屋信息">
            <el-input v-model="form.conent"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="xixi()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TabsView from "../pm/TabsView.vue";
import { addfz,fangzi,del,afffz } from "../../apis/lag/link";
import $http from "axios";
export default {
  components: { TabsView },
  data() {
    return {
      form: {
        name: "",
        id: "",
        img: "",
        conent: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        houseImg: "",
        houseArea: "",
        houseStatus: "",
      },
      dialogVisible: false,
      tableData: [],
      lag: "",
      dialog: false,
    };
  },
  methods: {
    xixi() {
      addfz(this.lag, this.form.conent, this.form.houseArea).then((ok) => {
        console.log("111", ok);
        fangzi().then((ok) => {
          console.log(ok);
          this.tableData = ok.data.data;
          console.log(this.tableData);
        });
      });
      this.dialogVisible = false;
    },
    xixixi(){
     console.log("111",this.lag);
      afffz(this.lag, this.form.conent, this.form.houseArea,this.form.id).then((ok)=>{
        console.log(ok);
          fangzi().then((ok) => {
          console.log(ok);
          this.tableData = ok.data.data;
          console.log(this.tableData);
        });
      })
        this.dialog = false;
    },
    uploadimg() {
      let formdata = new FormData();
      formdata.append("img", this.$refs.upimg.files[0]);
      console.log(this.$refs.upimg.files[0]);
      $http({
        url: "http://47.94.195.189:7777/upload",
        method: "POST",
        data: formdata,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((ok) => {
        console.log(ok);
        this.lag = ok.data.data;
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    dell(value) {
      console.log(value);
      del(value).then((ok) => {
        console.log(ok);
        fangzi().then((ok) => {
          console.log(ok);
          this.tableData = ok.data.data;
          console.log(" this.tableData21122 ", this.tableData);
        });
      });
    },
  },
  mounted() {
    fangzi().then((ok) => {
      console.log(ok);
      this.tableData = ok.data.data;
      console.log(this.tableData);
    });
  },
};
</script>

<style scoped>
img {
  width: 80px;
  height: 80px;
}
</style>
